<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 引用模板 Header -->
    <div th:insert="bg/publicHead :: publicHead(${pageName})"></div>
    <!-- [ Header ] end -->

    <link rel="stylesheet" href="/css/base.css" type="text/css" />
    <style type="text/css">
        .bodybg{ background:url('../bgTemplate/image/body-bg-7.jpg')}
    </style>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/sweetalert.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>
    <script th:inline="javascript">
        window.onerror=function(){return true;};
        var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
        var maxFileSize=500; //KB
        var curUploadFirstClassImageUrl=null;
        $(document).ready(function() {
            //还原图片详情
            if(myStorage.getItem("curUploadFirstClassImageUrl")!=null && myStorage.getItem("curUploadFirstClassImageUrl")!=""){
                curUploadFirstClassImageUrl=myStorage.getItem("curUploadFirstClassImageUrl");
                $(".uploadedimg").css("display","block");
                $(".uploadedimg img").attr("src",curUploadFirstClassImageUrl); //显示刚刚上传成功的图片
            }
            var checkImageSize=(targetObj,curFile,flag)=>{
                console.log("当前检查文件",curFile,"文件大小:",curFile.size)
                if((curFile.size/1000)>maxFileSize){
                    targetObj.val("");
                    if(flag==true){
                        swal("上传失败！图片不能大于"+maxFileSize+"KB", "请压缩后上传", "error");
                    }
                    return false;
                }
                return true;
            }



            //封面图上传
            $("#uploadPhotoFile").change(async function(){
                var file = this.files[0];
                //检测文件大小
                if(checkImageSize($(this),file,true)===false){
                    return;
                }
                var formData = new FormData();
                formData.append("multipartFile",file);
                //console.log("准备上传参数信息:",formData,formData.forEach(value => console.log(value)))
                var res=await SyncFirstClassAjaxRequest(ServerIP+'api/FirstClassUploadImage',formData);
                console.log("文件上传结果===>:",res);
                if(res.code===200){
                    curUploadFirstClassImageUrl=res.result;
                    myStorage.setItem("curUploadFirstClassImageUrl",curUploadFirstClassImageUrl); //设置缓存
                    console.log("图片地址",curUploadFirstClassImageUrl)
                    $(".uploadedimg img").attr("src",curUploadFirstClassImageUrl); //显示刚刚上传成功的图片
                    $(this).val(""); //重置组件状态
                    swal("图片上传成功", "图片已上传", "success");
                    $(".uploadedimg").css("display","block");
                }else{
                    console.log("图片上传失败:",res.result); //失败原因
                    if(res.result!=null && res.result.indexOf("Prefix string too short")!=-1){
                        alert("图片名称太短 上传失败");
                    }else{
                        alert(res.msg);
                    }
                    clear(); //清除缓存
                }
            });

            //清除缓存
            var clear=()=>{
                curUploadFirstClassImageUrl="";
                myStorage.removeItem("curUploadFirstClassImageUrl");
                $(".uploadedimg").css("display","none");
            }


            //发布
            $(".addBtn").click(async function(){
                var title=$(".firstClasstitle").val();
                if(/\S/.test(title)===false){
                    swal("请输入视频标题", "视频标题未设置", "error");
                    return;
                }
                if (confirm("是否添加主类?")) {
                    var addData={
                        firstclass:title,
                        firstphotoface:curUploadFirstClassImageUrl
                    };
                    if(addData!=null){
                        var res=await SyncJson("/api/addFirstClass",addData);
                        if(res.code===200){
                            alert("主类添加成功");
                            clear(); //清除缓存
                            window.location.href="/bg/addSecondClass" //跳到二级分类
                        }
                    }
                }
            });
        }); //Document Ready End
    </script>
</head>


<body class="bodybg">
<!-- [ Main Content ] start -->
<div class="contain">
    <h4>添加主类</h4>
    <div class="doctors">
        <div class="tables">
            <div class="text">封面图:</div>
            <div style="display:block;">
                <div class="input uploadedimg" style="display:none;"><img src="" /></div>
                <div class="input selectUpload" style="margin-top:5px;"> <input id="uploadPhotoFile" type="file" accept="image/*"  /></div>
            </div>
        </div>
        <div class="tables">
            <div class="text">主类名:</div>
            <div class="input"><input type="text" class="firstClasstitle"></div>
        </div>
        <div class="tables" style="border-bottom:0px; margin-top:20px;">
            <div class="text"><a class="addBtn">添加</a></div>
            <div class="input"></div>
        </div>
    </div>
</div>
<!--中间 End -->
</body>



</html>